<template>
<div class="person">
 <h2>姓名:{{ name }}</h2>
 <h2>年龄:{{ age }}</h2>
 <button @click="changeName">修改名字</button>
 <button @click="changeAge">修改年龄</button>
 <button @click="showTele">查看联系方式</button>
</div>
</template>

<script lang="ts">
export default{
 name:'Person',
 data(){
  return {
   name:'张三',
   age:18,
   tel:'130000000'
  }
 },
 methods:{
  showTele(){
   alert(this.tel)
  },
  changeName(){
   this.name = 'zhangsan'
  },
  changeAge(){
   this.age += 1
  }
 }
}
</script>

<style scoped>
button{
   margin:0 5px;
   
}
.person{
 border-radius: 10px;
 background-color:#8ee6ea;
}
</style>